<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/column/cosult_banner.png" alt />
      <div class="bread">
        <p>
          <router-link to="/">首页</router-link>》咨询建议
        </p>
      </div>
    </div>
    <div class="big">
      <div class="tankuang_bg">
        <div class="juanzeng">
          <div class="zuanzeng_name">
            <label for>名称:&nbsp;&nbsp;</label>
            <input type="text" @click="danji()" v-model="mingcheng" />
          </div>
          <div class="zuanzeng_content">
            <label for>正文:&nbsp;&nbsp;&nbsp;</label>
            <textarea name id cols="30" @click="danji()" rows="10" v-model="content"></textarea>
          </div>
        </div>
        <div class="gerenxinxi">
          <p class="person">个人信息</p>

          <ul>
            <li>
              <span class="person_name">
                <label for>姓名:&nbsp;&nbsp;</label>
                <input type="text" v-model="name" disabled="disabled" />
              </span>
              <span class="person_mail">
                <label for>邮箱:&nbsp;&nbsp;</label>
                <input type="text" v-model="mail" disabled="disabled" />
              </span>
            </li>
            <li>
              <span class="person_mobile">
                <label for>电话:&nbsp;&nbsp;</label>
                <input type="text" v-model="mobile" disabled="disabled" />
              </span>
              <span class="person_zhiye">
                <label for>职业:&nbsp;&nbsp;</label>
                <input type="text" v-model="zhiye" disabled="disabled" />
              </span>
            </li>
            <li class="person_sfz">
              <label for>身份证:&nbsp;&nbsp;</label>
              <input type="text" v-model="sfz" disabled="disabled" />
            </li>
            <li class="person_yzm">
              <span>验证码</span>
              <input type="text" v-model="yzm" />
              <div
                class="ValidCode disabled-select"
                style="width:100px;height:34px;"
                @click="refreshCode"
              >
                <span
                  v-for="(item, index) in codeList"
                  :key="index"
                  :style="getStyle(item)"
                >{{ item.code }}</span>
              </div>
              <!-- <div class="shuzi" v-html="toyzm1"></div> -->
              <img :src="yzm" alt />
              <span class="tip" @click="refreshCode">看不清 换一张</span>
            </li>
          </ul>
          <div class="btn">
            <p @click="clean">取消</p>
            <p @click="submit">提交</p>
          </div>
        </div>
      </div>
      <p class="zuanzeng_title">咨询建议</p>
      <ul class="talk">
        <li v-for="(item, index) of currentPageData" :key="index">
          <div class="title">
            <span>标题:&nbsp;&nbsp;</span>
            <span>{{ item.title }}</span>
          </div>
          <div class="content">
            <span>正文:&nbsp;&nbsp;</span>
            <span v-html="item.content"></span>
          </div>
          <div class="man">
            <span>管理员:&nbsp;&nbsp;</span>
            <span>{{ item.answer }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div id="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :pager-count="5"
        :page-size="pageSize"
        layout="  prev, pager, next"
        :total="this.productList.length"
      ></el-pagination>
    </div>

    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { JudgeLogin } from "../../api/login";
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      codeList: [],
      toyzm1: "",
      mingcheng: "",
      content: "",
      name: "",
      mail: "",
      mobile: "",
      zhiye: "",
      yzm: "",
      sfz: "",
      zj: [
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
        { title: "海螺", content: "海螺贝壳边缘", man: "非常不错" },
      ],
      content: null,
      dialogTableVisible: false,
      dialogFormVisible: false,

      list: [1, 2, 3],
      newxx: [{}],
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 3, // 每页显示数量
      currentPageData: [], //当前页显示内容
    };
  },
  mounted() {
    this.setCurrentPageData();
    this.person();

    // this.LOGIN();
    this.createdCode();
    // this.toyzm()
  },
  components: {
    foot2: foot2,
  },
  methods: {
    ...mapActions(["isShow"]),
    // 验证码
    refreshCode() {
      this.createdCode();
    },
    createdCode() {
      const len = 4;
      const codeList = [];
      const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
      const charsLen = chars.length;
      // 生成
      for (let i = 0; i < len; i++) {
        const rgb = [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 240),
          Math.round(Math.random() * 200),
        ];
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${
            Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)
          }deg)`,
        });
      }
      // 指向
      this.codeList = codeList;

      // 将当前数据派发出去
      this.$emit("update:value", codeList.map((item) => item.code).join(""));
    },
    getStyle(data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
    },
    // 个人信息的渲染
    person() {
      this.$api.post(this.zs + "/live/user/info").then((res) => {
        // console.log(res)
        this.mobile = res.data.data.mobile;
        this.name = res.data.data.name;
        this.sfz = res.data.data.idttNo;
        this.mail = res.data.data.email;
        this.zhiye = res.data.data.zhiye;
      });
    },

    submit() {
      let mingcheng = this.mingcheng;
      let content = this.content;
      let yzm = this.yzm;
      JudgeLogin(this);
      let str = [];
      this.codeList.forEach((item) => {
        str.push(item.code);
      });

      let arr = str.join(""); //按照(什么方式)空格拼接

      if (!content || !mingcheng) {
        this.$message({
          message: "内容不能为空",
          type: "error",
          duration: 800,
          offset: 320,
        });
        return;
      }
      if (!yzm) {
        this.$message({
          message: "验证码不能为空",
          type: "error",
          duration: 800,
          offset: 320,
        });
        (this.yzm = ""), this.createdCode();
        return;
      }

      if (yzm.toLowerCase() != arr.toLowerCase()) {
        this.$message({
          message: "验证码有误",
          type: "error",
          duration: 800,
          offset: 320,
        });
        this.createdCode();
        return;
      }

      this.$api
        .post(
          this.zs +
            "/zixun/create?title=" +
            mingcheng +
            "&content=" +
            content +
            ""
        )
        .then((res) => {
          (this.yzm = ""), this.createdCode();
          if (res.data.code == "OK") {
            this.$message({
              message: "提交成功",
              type: "success",
              duration: 800,
              offset: 320,
            });
            this.yzm = "";
            this.mingcheng = "";
            this.content = "";
          }
        });
    },

    clean() {
      this.mingcheng = "";
      this.content = "";
    },
    tankuang(index) {
      this.dialogTableVisible = true;
      this.xiabiao = index;
    },
    danji() {
      JudgeLogin(this);
    },
    setCurrentPageData() {
      this.$api.get(`${this.zs}/zixun/page?pageSize=10000000`).then((res) => {
        // 计算一共有几页

        this.totalPage = Math.ceil(this.productList.length / this.pageSize);

        // 计算得0时设置为1
        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
        this.productList = res.data.data.list;

        let begin = (this.currentPage - 1) * this.pageSize;
        let end = this.currentPage * this.pageSize;
        //当前页的数据等于
        this.currentPageData = this.productList.slice(begin, end);
      });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }

      // this.page = val;
      this.setCurrentPageData(this.zs + "/zixun/page?pageSize=1000000");
    },
  },
};
</script>
<style scoped>
.ValidCode {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
span {
  display: inline-block;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}
li,
ul,
hr,
p,
h3 {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.bg_zj {
  background: url("../../assets/image/zhengji/zj.png") no-repeat;
  height: 65px;
  color: red;
  text-align: center;
  line-height: 65px;
  margin-bottom: 60px;
}
.big {
  width: 1200px;
  margin: auto;
  padding-top: 50px;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}

.zuanzeng_title {
  background: #f7f7f7;
  color: #333333;
  height: 40px;
  font-size: 24px;
  padding: 5px;
  line-height: 40px;
  margin-bottom: 40px;
}

.title,
.content,
.man {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}
.man {
  color: #5b66f8;
}
.talk {
  margin-bottom: 80px;
}
.talk li {
  background: #f6f5f4;
  padding: 20px 24px 10px;

  box-sizing: border-box;
  margin-bottom: 20px;
}
.zuanzeng_content {
  display: flex;
}

/* kuang */

.zuanzeng_content {
  display: flex;
}
.zuanzeng_content,
.zuanzeng_name {
  font-size: 20px;
}
.zuanzeng_name input {
  width: 1112px;
  height: 50px;
  margin-bottom: 20px;
}
.zuanzeng_content textarea {
  width: 1112px;

  height: 240px;
  margin-bottom: 40px;
}
.gerenxinxi {
  padding-left: 20px;
  box-sizing: border-box;
}
.talk li {
  background: #f6f5f4;
}
.person {
  box-sizing: border-box;
  padding-bottom: 10px;
  color: #333333;
  font-weight: 500;
  font-size: 24px;
  border-bottom: 3px solid #999999;
  margin-bottom: 40px;
}
.zuanzeng_name {
  margin-top: 44px;
}
.person_name input,
.person_mail input,
.person_mobile input,
.person_zhiye input,
.person_sfz input {
  height: 35px;
  width: 440px;
  margin-right: 90px;
  margin-bottom: 20px;
  background: #f6f5ff;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding-left: 20px;
}
.person_yzm input {
  width: 108px;
  height: 35px;
}
.person_name label,
.person_mail label,
.person_mobile label,
.person_zhiye label {
  color: #333333;
  font-size: 18px;
}
.person_name,
.person_mail,
.person_mobile,
.person_sfz {
  margin-bottom: 20px;
  display: inline-block;
}
.person_yzm {
  margin-bottom: 50px;
  display: flex;
  width: 400px;
  /* border:1px solid red; */
  justify-content: space-between;
  align-items: center;
}
.tip {
  color: red;
}
.shuzi {
  width: 80px;
  height: 40px;
  background: cadetblue;
}
.btn {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 80px;
}
.btn p {
  width: 200px;
  height: 40px;
  line-height: 40px;
}
.btn p:first-child {
  border: 1px solid #666666;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}
.btn p:nth-child(2) {
  border: 1px solid #666666;
  border-radius: 3px;
  cursor: pointer;
  color: white;
  background: #4480f6;
  text-align: center;
}

.talk > li > div > span:first-child {
  width: 63px;
}
.talk > li > div > span:nth-child(2) {
  width: 900px;
}
.talk > li {
  line-height: 23px;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
